<template>
  <div class="app-container oneSearchNoFooter">
    <div class="customContainer ">
      <!-- 搜索头 -->
      <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
        <dj-store-select :category="562" :defaultStore="formInline.store_id" :needItem="true" @change="selectStoreChanged" />
        <el-form-item>
          <el-date-picker v-model="pickerDate" value-format="yyyy-MM-dd" type="daterange" align="right" unlink-panels range-separator="-"
            start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <dj-button size="small" @search="searchClick" />
        </el-form-item>
        <!-- <el-form-item>
          <el-tooltip class="item" effect="dark" placement="bottom-end">
            <div slot="content" style="line-height:20px;width:400px">
              剩余数量（个）:该门店的实际库存（主仓+中转仓+机台仓）
              <br> 金额（元）:该门店的实际库存价值的价格=礼品成本价*礼品数
            </div>
            <i class="el-icon-question"></i>
          </el-tooltip>
        </el-form-item> -->
      </el-form>
      <!-- 表格 -->
      <dj-simple-table :columns="tableColumns" :data="listData" :global="global" :loading="listLoading" />
      <!-- <el-table highlight-current-row :data="listData" v-loading.body="listLoading" border element-loading-text="Loading" size="mini">
        <el-table-column align="center" label="序号">
          <template slot-scope="scope">
            {{scope.$index + 1}}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="house_type_name" label="仓库"></el-table-column>
        <el-table-column align="center" label="调整入库数量(个)">
          <template slot-scope="scope">
            <router-link :to="{name:'report/stock_adjust_detail_form',params :{house_id:scope.row.house_id,house_type_name:scope.row.house_type_name,store_name:store_name,start_time:begin_time,end_time:ends_time}}" class="num_color" >
              {{scope.row.num_in}}
            </router-link>
          </template>
        </el-table-column>
        <el-table-column align="center" label="调整入库金额（元）">
          <template slot-scope="scope">
            <router-link :to="{name:'report/stock_adjust_detail_form',params :{house_id:scope.row.house_id,house_type_name:scope.row.house_type_name,store_name:store_name,start_time:begin_time,end_time:ends_time}}" class="num_color" >
              {{scope.row.money_in|keepTwoNum}}
            </router-link>

          </template>
        </el-table-column>
        <el-table-column align="center" label="调整出库数量(个)">
          <template slot-scope="scope">
            <router-link :to="{name:'report/stock_adjust_detail_form',params :{house_id:scope.row.house_id,house_type_name:scope.row.house_type_name,store_name:store_name,start_time:begin_time,end_time:ends_time}}" class="num_color" >
              {{scope.row.num_out}}
            </router-link>
          </template>
        </el-table-column>
        <el-table-column align="center" label="调整出库金额（元）">
          <template slot-scope="scope">
            <router-link :to="{name:'report/stock_adjust_detail_form',params :{house_id:scope.row.house_id,house_type_name:scope.row.house_type_name,store_name:store_name,start_time:begin_time,end_time:ends_time}}" class="num_color" >
              {{scope.row.money_out|keepTwoNum}}
            </router-link>

          </template>
        </el-table-column>
      </el-table> -->
    </div>
  </div>
</template>
<script>
import { getList } from '@/api/report/stock_adjust_summary_form';
import { pickerOptionsF, pickerDateDot, optionMaxTime, getDateString } from '@/utils';
import { DjSimpleTable } from '@/components/table';
import { DjStoreSelect } from '@/components/store';
export default {
  components: {
    'dj-simple-table': DjSimpleTable,
    'dj-store-select': DjStoreSelect
  },
  data() {
    return {
      global: {
        storeName: '',
        start_time: '',
        end_time: ''
      },
      tableColumns: [
        {
          label: '序号',
          dtcol: 'index'
        },
        {
          label: '仓库',
          dtcol: 'house_type_name'
        },
        {
          label: '调整入库数量(个)',
          dtcol: 'num_in',
          link: 'report/stock_adjust_detail_form'
        },
        {
          label: '调整入库金额(元)',
          dtcol: 'money_in',
          isnum: true,
          link: 'report/stock_adjust_detail_form'
        },
        {
          label: '调整出库数量(个)',
          dtcol: 'num_out',
          link: 'report/stock_adjust_detail_form'
        },
        {
          label: '调整出库金额(元)',
          dtcol: 'money_out',
          isnum: true,
          link: 'report/stock_adjust_detail_form'
        }
      ],
      listData: [],
      listLoading: false,
      formInline: {
        store_id: this.$store.getters.optionId,
        start_time: '', //2019-11-01
        end_time: '', //2019-11-30
        look_del: '0'
      },
      pickerOptions: pickerOptionsF(-1),
      pickerDate: pickerDateDot(-1,-1),
      begin_time: '',
      ends_time: '',
      store_name:'',
    };
  },
  watch: {
    pickerDate: function() { 
      this.begin_time = this.pickerDate[0];
      this.ends_time = this.pickerDate[1];

      this.global.start_time = this.pickerDate[0];
      this.global.end_time = this.pickerDate[1];
    }
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      //当进入组件之前，执行 beforRouteEnter 路由钩子函数 ,//参数vm就是当前组件的实例。
      // console.log(vm)
      // console.log(vm.$route)
      vm.global.start_time = vm.formInline.start_time
      vm.global.end_time = vm.formInline.end_time
      vm.beforeComingIn();
    });
  },
  created() {
    // if (this.pickerDate) {
    //   this.begin_time = this.pickerDate[0];
    //   this.ends_time = this.pickerDate[1];
    // }
  },
  methods: {
    beforeComingIn() {
      if (this.$route.query.routerflag) {
        // console.log(this.$route.query, 'zst1119 beforeComingIn route.query');
        let col = this.$route.query.col;
        // 本月第一天至昨天
        let fist_day = getDateString('this_month_first_day', this.$route.query.row.time);
        let date = new Date(this.$route.query.row.time);
        let now = new Date();
        let yesterday;
        if (date.getMonth() == now.getMonth()) {
          yesterday = getDateString('yesterday');
        } else {
          yesterday = getDateString('this_month_last_day', this.$route.query.row.time);
        }
        this.pickerDate = [fist_day, yesterday];
        this.formInline.store_id = this.$route.query.row.store_id; 
        // this.searchClick();
      } 
      // else {
      //   if (!this.listData || this.listData.length == 0) {
      //     this.searchClick();
      //   }
      // }
    },
    selectStoreChanged(obj, item) {
      for (let key in obj) this.formInline[key] = obj[key];
      this.store_name = item.name;
      this.global.storeName = item.name;
      this.searchClick();
    },
    // 搜索
    searchClick() {
      optionMaxTime(this.pickerDate).then(() => {
        //最大可选择时间区间
        this.formInline.start_time = this.pickerDate ? this.pickerDate[0] : '';
        this.formInline.end_time = this.pickerDate ? this.pickerDate[1] : '';
        this.fetchData();
      });
    },
    // 列表获取
    fetchData() {
      this.listLoading = true;
      getList(this.formInline)
        .then(response => {
          if (!response) this.listData = [];
          else this.listData = response.data;
          let listData = this.listData;
          if (listData.length > 0) {
            for (let key in listData) {
              listData[key].index = parseInt(key) + 1;
            }
            this.listData = listData;
          }
          this.listLoading = false;
        })
        .catch(res => {
          this.listLoading = false;
        });
    }
  }
};
</script>
<style scoped>
.num_color {
  color:#409eff;
} 
</style>